<template>
    <div class="creatorins" v-if="creatorFilter">
      <van-nav-bar fixed z-index="11">
        <template #left>
          <i
            class="iconfont icon-fanhui"
            style="font-size: 20px; font-weight: 600"
            @click="$router.back()"
          ></i>
        </template>
        <template #title>
          <span style="font-size: 20px; font-weight: 600">{{
            creatortitle
          }}</span>
        </template>
      </van-nav-bar>
      <div class="xiala" ref="profession">
        <van-dropdown-menu class="sele">
          <van-dropdown-item v-model="value" :options="options" />
          <van-dropdown-item class="technical" :title="value1" ref="items">
            <van-cell center>
              <div class="classify">
                <div class="itembox" ref="itembox">
                  <div class="item active" @click="onSelect($event, 0)">
                    {{ creatorFilter.categories.title }}
                  </div>
                  <div
                    class="item"
                    v-for="(i, index) in creatorFilter.categories.options"
                    :key="index"
                    @click="onSelect($event, i.value)"
                  >
                    {{ i.title }}
                  </div>
                </div>
              </div>
            </van-cell>
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>
      <div class="itembox2" v-if="dataList.length">
        <div class="item2">
          <CreatIns :list="dataList"></CreatIns>
        </div>
      </div>
      <MyLoading v-else></MyLoading>
    </div>
    <MyLoading v-else></MyLoading>
</template>

<script>
import Vue from "vue";
import { NavBar } from "vant";
import CreatIns from "@/components/CreatIns.vue";
import MyLoading from "@/components/MyLoading.vue";
import { DropdownMenu, DropdownItem } from "vant";
Vue.use(NavBar);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
export default {
  data() {
    return {
      value: "hot",
      dataList: [],
      creatortitle: "",
      creatorFilter: null,
      showLoad:true,
    };
  },
  components: {
    CreatIns,
    MyLoading
  },
  created() {
    if (this.$route.query.id == 0) {
      this.axios
        .get("https://apis.netstart.cn/xpc/creators?role_type=person")
        .then((res) => {
          this.dataList = res.data.data.list;
          this.creatortitle = "创作人";
          this.creatorFilter = res.data.data.filter;
        });
    } else if (this.$route.query.id == 1) {
      this.axios
        .get("https://apis.netstart.cn/xpc/creators?role_type=company")
        .then((res) => {
          this.dataList = res.data.data.list;
          this.creatortitle = "机构";
          this.creatorFilter = res.data.data.filter;
        });
    }
  },
  computed: {
    options: function () {
      var arr = [];
      this.creatorFilter.order.options.forEach((e) => {
        arr.push({ text: e.title, value: e.value });
      });
      return arr;
    },
    value1: function () {
      if (this.creatorFilter) {
        var k = this.creatorFilter.categories.title;
        return k;
      }
    },
  },
  methods: {
    onSelect(eve, id) {
      this.$refs.items.toggle();
      this.$refs.itembox.querySelectorAll(".item").forEach((e) => {
        if (e.classList.contains("active")) {
          e.classList.remove("active");
        }
      });
      eve.target.classList.add("active");
      if (this.$route.query.id == 0) {
        this.dataList=[]
        this.axios
          .get(
            "https://apis.netstart.cn/xpc/creators?role_type=person&order=" +
              this.value +
              "&occupation_id=" +
              id
          )
          .then((res) => {
            this.dataList = res.data.data.list;
          });
      } else if (this.$route.query.id == 1) {
        this.dataList=[]
        this.axios
          .get(
            "https://apis.netstart.cn/xpc/creators?role_type=company&order=" +
              this.value +
              "&occupation_id=" +
              id
          )
          .then((res) => {
            this.dataList = res.data.data.list;
          });
      }
    },
  },
  watch: {
    value: function (n) {
      this.dataList=[]
      this.axios
        .get(
          "https://apis.netstart.cn/xpc/creators?role_type=person&order=" + n
        )
        .then((res) => {
          this.dataList = res.data.data.list;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.creatorins {
  background-color: #fff;
  .itembox2 {
    padding: 96px 15px 15px 15px;
  }
  .xiala {
    position: fixed;
    width: 100%;
    top: 45px;
    z-index: 12;
    background-color: #fff;
    border-top: 1px solid #f7f7f7;
    border-bottom: 1px solid #f7f7f7;
    display: flex;
    align-items: center;
    height: 48px;
    .itembox {
      display: flex;
      flex-wrap: wrap;
      .item {
        margin: 0 10px 10px 0px;
        font-size: 12px;
        padding: 5px 15px;
        background-color: #f7f7f7;
        border-radius: 5px;
        color: #444;
        &.active {
          color: #e46360;
          background-color: #ffc4c3;
        }
      }
    }
    .van-dropdown-menu {
      width: 50%;
      /deep/.van-dropdown-menu__bar {
        box-shadow: unset !important;
        height: 46px !important;
      }
      /deep/.van-dropdown-menu__item {
        height: 45px !important;
      }
    }
  }
}
</style>